<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>应收账单 - TMS</title>
    <link rel="stylesheet" href="/view/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/view/frame/static/css/global.css?v=1.0">
    <link rel="stylesheet" href="/view/tms/static/css/iframe.css?v=1.0">
  </head>
  <style>
      .layui-form-item{
          margin:0;
      }
  </style>
  <body>
    <!--start: 搜索-->
    <div class="panel-handle search-bar">
        <form class="layui-form layui-form-pane" autocomplete="off">
            <div class="layui-row layui-col-space5">
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户简称</label>
                        <div class="layui-input-block">
                            <input type="text" name="client" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账单号</label>
                        <div class="layui-input-block">
                            <input type="text" name="billNo" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label" >账期</label>
                        <div class="layui-input-block">
                            <input type="text" name="payment" class="layui-input" id="payment"  placeholder="全部">
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label" >核对状态</label>
                        <div class="layui-input-block">
                            <select name="checkType">
                                <option value="" selected="selected">全部</option>
                                <option value="0" >未提交</option>
                                <option value="1" >待对方核对</option>
                                <option value="2" >待审核</option>
                                <option value="3" >核对完成</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">核销状态</label>
                        <div class="layui-input-block">
                            <select name="cancelType">
                                <option value="" selected="selected">全部</option>
                                 <option value="0" >未核销</option>
                                <option value="1" >部分核销</option>
                                <option value="2" >全部核销</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:15%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否已催账</label>
                        <div class="layui-input-block">
                            <select name="demandPayment">
                                <option value="" selected="selected">全部</option>
                                <option value="true" >是</option>
                                <option value="false" >否</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm1" style="width:10%;">
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-danger" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                </div>
            </div>
        </form>
    </div>  
    <!--end: 搜索-->
    
    <!--start: 按钮组-->
    <div class="panel-handle btns-bar">
      <div class="layui-btn-group fl">
        <button class="layui-btn layui-btn-normal" data-type="detailData">查看明细</button>
        <button class="layui-btn layui-btn-normal" data-type="submitbill">提交账单</button>
        <button class="layui-btn layui-btn-normal" data-type="checkbill">核对账单</button>
        <button class="layui-btn layui-btn-normal" data-type="checkdetail">核对详情</button>
        <button class="layui-btn layui-btn-normal" data-type="setMoneyPermi">催款</button>
        <button class="layui-btn layui-btn-normal" data-type="deriveDetail">导出明细账单</button>
        <button class="layui-btn layui-btn-normal" data-type="deriveBrief">导出简要账单</button>
      </div>
      <!-- <div class="layui-btn-group fr">
        <button class="layui-btn"><i class="layui-icon">&#xe614;</i>定义表头</button>
        <button class="layui-btn"><i class="layui-icon">&#xe62d;</i>导出EXCEL</button>
      </div> -->
      <div class="clr"></div>
    </div>
    <!--end: 按钮组-->

    <!--start:表格列表-->
    <table class="layui-hide" id="tableList" lay-filter="tbar"></table>
    <!--end:表格列表-->
    
    <!--start:快捷搜索-->
    <div id="shortBar" style="display:none;">
      <dl>
        <dt>应收合计 ： <span class="layui-badge layui-bg-cyan receivedSum"></span></dt>
        <dd><a href="">未收合计<span class="layui-badge noReceivedSum"></span></a></dd>
      </dl>
    </div>
    <!--end:快捷搜索-->
  </body>
  <script type="text/html" id="verifyStatusTpl">
    {{# if(d.verifyStatus == 0){ }}
      <p>未提交</p>
    {{# }else if(d.verifyStatus == 1){ }}
      <p>待对方核对</p>
    {{# }else if(d.verifyStatus == 2){ }}
      <p>待审核</p>
    {{# }else{ }}
      <p>核对完成</p>
    {{# } }}
  </script>
   <script type="text/html" id="confirmStatusTpl">
    {{# if(d.confirmStatus == 0){ }}
      <p>未核销</p>
    {{# }else if(d.confirmStatus == 1){ }}
      <p>部分核销</p>
    {{# }else{ }}
      <p>全部核销</p>
    {{# } }}
  </script>
  <script type="text/html" id="hasUrgeTpl">
    {{#  if(d.hasUrge == true){ }}
      <p>是</p>
    {{#  }else{ }}
      <p>否</p>
    {{#  } }}
  </script>
  <script type="text/html" id="billMonthTpl">
      {{new Date(d.billMonth).format("yyyy-MM")}}
  </script>
  <script type="text/html" id="createDateTpl">
      {{new Date(d.createDate).format("yyyy-MM-dd hh:mm:ss")}}
  </script>

  <script charset="utf-8" src="/view/frame/static/js/jquery.min.js?v=1.0"></script>
  <script charset="utf-8" src="/view/frame/layui/layui.js"></script>
  <script charset="utf-8" src="/view/tms/static/js/tms_index.js?v=1219"></script>
  
  <script charset="utf-8" src="/view/frame/static/js/errorCodeMap.js"></script>
  <script charset="utf-8" src="/view/frame/static/js/HC.js?v=1.4"></script>
  <script charset="utf-8" src="/view/tms/static/js/validator.js"></script>
  <script charset="utf-8" src="/view/tms/static/js/bizUtil.js"></script>
  
  <script>
  layui.use(['form', 'layer','laydate', 'table', 'tms_tab'], function(){
    var form = layui.form,
        layer = layui.layer,
        laydate = layui.laydate,
        table = layui.table,
        tmsTab = layui.tms_tab,
        $ = layui.jquery;
        laydate.render({
          elem: '#payment'
          ,type: 'month'
        });
     var $customerName,
     $billNo,
     $createDate,
     $verifyStatus,
     $confirmStatus,
     $hasUrge;

    setTableData();
    var $shortBarHtml = $('#shortBar').html();
    $('.layui-table-tool').prepend('<div class="short-bar">' + $shortBarHtml + '</div>');
   
    
    //监听提交
    form.on('submit(search)', function(data){
     $customerName = $.trim(data.field.client),
     $billNo = $.trim(data.field.billNo),
     $createDate = $.trim(data.field.payment),
     $verifyStatus = $.trim(data.field.checkType),
     $confirmStatus = $.trim(data.field.cancelType),
     $hasUrge = $.trim(data.field.demandPayment);
      setTableData($customerName, $billNo, $createDate, $verifyStatus, $confirmStatus, $hasUrge);
      return false;
    });
    
    //方法级渲染
    function setTableData($customerName, $billNo, $createDate, $verifyStatus, $confirmStatus, $hasUrge){
      typeof $customerName != 'undefined' ? $customerName = $customerName : $customerName = '';
      typeof $billNo != 'undefined' ? $billNo = $billNo : $billNo = '';
      typeof $createDate != 'undefined' ? $createDate = $createDate : $createDate = '';
      typeof $verifyStatus != 'undefined' ? $verifyStatus = $verifyStatus : $verifyStatus = '';
      typeof $confirmStatus != 'undefined' ? $confirmStatus = $confirmStatus : $confirmStatus = '';
      typeof $hasUrge != 'undefined' ? $hasUrge = $hasUrge : $hasUrge = '';
      var $pageSize = 15;

      table.render({
        elem: '#tableList',
        url: '/ucenter/general/finance/receivedBills/page.shtml?customerName='+$customerName+'&billNo='+$billNo+'&createDate='+$createDate+'&verifyStatus='+$verifyStatus+'&confirmStatus='+$confirmStatus+'&hasUrge='+$hasUrge,
        response: {
          statusCode: 'SUCCESS',
          countName: 'objects.pageResult.total', //数据总数的字段名称，默认：count
          dataName: 'objects.pageResult.list'
        },
        request: {
          pageName: 'pageNum', //页码的参数名称，默认：page
          limitName: 'pageSize', //每页数据量的参数名，默认：limit
        },
        cols: [[
          {checkbox: true, fixed: true},
          {field:'billNo', title: '账单号', align: 'center', width:190, event: 'setSign', style:'cursor: pointer;color:#51a2f7;'},
          {field:'customerName', title: '客户简称', align: 'center', width:150},
          {field:'billMonth', title: '账期', align: 'center', width:90, templet:"#billMonthTpl"},
          {field:'paymentType', title: '结算方式', align: 'center', width:90},
          {field:'orderCount', title: '运输单量', align: 'center', width:90},
          {field:'arkCount', title: '运输柜量', align: 'center', width:90},
          {field:'transportCost', title: '运费', align: 'center', width:100},
          {field:'extraCost', title: '异常费', align: 'center', width:100},
          {field:'totalCost', title: '应收合计', align: 'center', width:100},
          {field:'receiveCost', title: '实应收金额', align: 'center', width:100},
          {field:'receivedCost', title: '已收金额', align: 'center', width:100},
          {field:'invoiceCost', title: '开票金额', align: 'center', width:100},
          {field:'verifyStatus', title: '核对状态', align: 'center', width:100, templet:"#verifyStatusTpl"},
          {field:'confirmStatus', title: '核销状态', align: 'center', width:90, templet:"#confirmStatusTpl"},
          {field:'hasUrge', title: '是否已催账', align: 'center', width:100, templet:"#hasUrgeTpl"},
          {align:'createDate', title: '制单时间', align: 'center', width:200, templet:"#createDateTpl"}
        ]],
        id: 'dataReload',
        page: true,
        limits: [15, 30, 50, 100],
        limit: $pageSize,
        height: 'full-130',
        even: true,
        done: function(res, curr, count){
          $('.noReceivedSum').html(res.objects.smallPageResult.noReceivedSum);
          $('.receivedSum').html(res.objects.smallPageResult.receivedSum);
        }
      });
      form.render();
    }

    //监听工具条
    table.on('tool(tbar)', function(obj){
        if(obj.event === 'setSign'){
          var data = obj.data;
          tmsTab.add($(this), '查看明细（' + data.customerName + '）', 'detailData.html?customerId=' + data.customerId + '&billMonth='+ data.billMonth+ '&customerName='+ data.customerName);
        }
    });

    var active = {
      //查看明细
      detailData: function(){
        
         var checkStatus = table.checkStatus('dataReload'),
            data = checkStatus.data;
            // var $billMonth = new Date(data[0].billMonth).format("yyyy-MM");
        if(data.length == 0){
          parent.layer.alert('你还未选中数据！');
          // tmsTab.add($(this), '提交账单', 'submitbill.html');
        }else if(data.length > 1){
          parent.layer.alert('只能选择一条数据！');
        }else{
          tmsTab.add($(this), '查看明细（' + data[0].customerName + '）', 'detailData.html?customerId=' + data[0].customerId + '&billMonth='+ data[0].billMonth+ '&customerName='+ data[0].customerName);
        }
      },
      //提交账单
      submitbill: function(){ //获取选中数据
        var checkStatus = table.checkStatus('dataReload'),
            data = checkStatus.data;
            console.log(data);
        if(data.length == 0){
          parent.layer.alert('你还未选中数据！');
        }else if(data.length > 1){
          parent.layer.alert('只能选择一条数据！');
        }else{
          if(data[0].verifyStatus == 0){
            tmsTab.add($(this), '提交账单（' + data[0].customerName + '）', 'submitbill.html?customerId=' + data[0].id);
          }else{
            parent.layer.alert('只能选择未提交数据！');
          }
        }
      },
      //核对账单
      checkbill: function(){
        var checkStatus = table.checkStatus('dataReload'),
            data = checkStatus.data;
        if(data.length == 0){
          parent.layer.alert('你还未选中数据！');
        }else if(data.length > 1){
          parent.layer.alert('只能选择一条数据！');
        }else{
          if(data[0].verifyStatus == 0){
          tmsTab.add($(this), '核对账单（' + data[0].customerName + '）', 'checkbill.html?customerId=' + data[0].id);
          }else{
              parent.layer.alert('只能选择待审核数据！');
          }
        }
      },
      //核对详情
      checkdetail: function(){
        var checkStatus = table.checkStatus('dataReload'),
            data = checkStatus.data;
        if(data.length == 0){
          parent.layer.alert('你还未选中数据！');
        }else if(data.length > 1){
          parent.layer.alert('只能选择一条数据！');
        }else{
          tmsTab.add($(this), '核对详情（' + data[0].customerName + '）', 'checkdetail.html?customerId=' + data[0].id);
        }
      },
      //催款
      setMoneyPermi: function(){
        var checkStatus = table.checkStatus('dataReload'),
            data = checkStatus.data;
             var $data = [];
            for(var $i = 0; $i< data.length; $i++){
              $data.push(data[$i].id);
            }
        if($data.length == 0){
          parent.layer.alert('请选择需要催款的数据！');
        }else{
            parent.layer.open({
              type: 2,
              title: '催款',
              shadeClose: true,
              shade: 0.8,
              area: ['1200px', '700px'],
              content: 'setMoneyPermi.html?ids='+ $data
            });
        }
      },
      //导出明细账单
      deriveDetail: function(){
        var checkStatus = table.checkStatus('dataReload'),
        $data = checkStatus.data;
          var $ids = [];
        for(var $i = 0; $i< $data.length; $i++){
          $ids.push($data[$i].id);
        }
         if($data.length == 0){
          parent.layer.alert('请选择需要导出的数据！');
        }else{
          $.ajax({
            type:'GET', 
            url:'/ucenter/general/finance/receivedBills/excelReceivedDetail.shtml?ids=' + $ids , 
            success:function(d){
              if(d.code == 'ERROR_FINANACE_EXPORT_EXCEL'){
                parent.layer.alert('没有查询到相关数据！');
              }else{
                document.location.href = '/ucenter/general/finance/receivedBills/excelReceivedDetail.shtml?ids=' + $ids ;
              }
            },
            error:function(){
              parent.layer.alert('操作失败！');
            }
            
          });
        }

      },
      //导出简要账单
      deriveBrief: function(){
        typeof $customerName != 'undefined' ? $customerName = $customerName : $customerName = '';
        typeof $billNo != 'undefined' ? $billNo = $billNo : $billNo = '';
        typeof $createDate != 'undefined' ? $createDate = $createDate : $createDate = '';
        typeof $verifyStatus != 'undefined' ? $verifyStatus = $verifyStatus : $verifyStatus = '';
        typeof $confirmStatus != 'undefined' ? $confirmStatus = $confirmStatus : $confirmStatus = '';
        typeof $hasUrge != 'undefined' ? $hasUrge = $hasUrge : $hasUrge = '';
        $.ajax({
          type:'GET', 
          url:'/ucenter/general/finance/receivedBills/excelReceived.shtml?customerName=' + $customerName + '&createDate=' + $createDate + '&billNo=' + $billNo + '&verifyStatus=' + $verifyStatus + '&confirmStatus=' + $confirmStatus + '&hasUrge=' + $hasUrge , 
          success:function(d){
            if(d.code == 'ERROR_FINANACE_EXPORT_EXCEL'){
                parent.layer.alert('没有查询到相关数据！');
              }else{
                  document.location.href = '/ucenter/general/finance/receivedBills/excelReceived.shtml?customerName=' + $customerName + '&createDate=' + $createDate + '&billNo=' + $billNo + '&verifyStatus=' + $verifyStatus + '&confirmStatus=' + $confirmStatus + '&hasUrge=' + $hasUrge ;
              }
            },
          error:function(){
             parent.layer.alert('操作失败！');
          }
        });

      }

    };
  
    $('.btns-bar .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    form.render();
  });
  </script>
</html>